<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>生成1000000数据</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .btn {
    width: 120px;
    height: 50px;
    font-size: 22px;
    color: #06C;
  }
</style>

<body>
  <div class="btn-holder">
    <button class="btn">开始</button>
    <script>
      const datas = new Array(100000).fill(0).map((_, i) => i);
      let btn = document.querySelector('.btn');
      btn.onclick = function () {
        // <!----这是一部分---->
        // for (let i = 0; i < datas.length; i++) {
        //   const item = datas[i];
        //   const p = document.createElement('p');
        //   p.innerText = item;
        //   document.body.appendChild(p);
        // }
        // <!----这是一部分---->




        // <!----这是一部分---->
        performChunk(datas);
        // <!----这是一部分---->
      };
      // 1000000个数据，浏览器会卡死，因为DOM操作很消耗性能
      function performChunk(datas) {
        if (datas.length === 0) {
          return
        }
        let i = 0; //目前执行的任务
        function _run() {
          if (i === datas.length) {
            return
          }
          requestIdleCallback(idle => {
            while (idle.timeRemaining() > 0 && i < datas.length) {
              const item = datas[i];
              const p = document.createElement('p');
              p.innerText = item;
              document.body.appendChild(p);
              i++;
            }
            _run();
          })
        }
        _run();
      }
    </script>
  </div>
</body>

</html>